<template>
  <div class="container" v-bind:style="{height: windowHeight + 'px' }">
    <div class="redback"></div>
    <view class="picker choose">{{year}}</view>
    <scroll-view scroll-x style="position: absolute;top:100rpx;left:0;background:#fff;width:100%;overflow:hidden;white-space:nowrap;">
      <div class="monthlist" :class="item.id == month ? 'cur': ''" @tap="changemonth(item.id)" v-for="item in monthlist" :key="item.id">{{item.name}}</div>
    </scroll-view>
    <div class="tab flex">
      <div class="tab_details flex-item" @tap="goUrl('/pages/guest/personalmonthplan/personalmonthplan')">
        <span class="plan_icon"></span>
        <div class="words">个人月度规划</div>
        <div class="describe">一月之计在于月初，定下 年度规划，更好的为之奋斗吧。</div>
      </div>
      <div class="tab_details flex-item" @tap="goUrl('/pages/guest/groupmonthplan/groupmonthplan')">
        <span class="plan_icon"></span>
        <div class="words">团队月度规划</div>
        <div class="describe">每月按时做好规划，更能 提高工作效率哦。</div>
      </div>
    </div>
  </div>
</template>

<script>
import wx from 'wx'
import moment from 'moment'
import api from '@/utils/api'
export default {
  data () {
    return {
      windowHeight: 0,
      year: moment().year(),
      month: moment().month() + 1,
      monthlist: [{
        id: '01',
        name: '1月'
      },
      {
        id: '02',
        name: '2月'
      },
      {
        id: '03',
        name: '3月'
      },
      {
        id: '04',
        name: '4月'
      },
      {
        id: '05',
        name: '5月'
      },
      {
        id: '06',
        name: '6月'
      },
      {
        id: '07',
        name: '7月'
      },
      {
        id: '08',
        name: '8月'
      },
      {
        id: '09',
        name: '9月'
      },
      {
        id: '10',
        name: '10月'
      },
      {
        id: '11',
        name: '11月'
      },
      {
        id: '12',
        name: '12月'
      }]
    }
  },

  components: {
  },
  onShow () {
    this.getinfo()
  },
  methods: {
    goUrl (urlinfo) {
      wx.navigateTo({
        url: urlinfo + '?month=' + this.month
      })
    },
    changemonth (id) {
      this.month = id;
      this.getinfo();
      console.log(moment(`${this.year}-${this.month}`, 'YYYY-MM').daysInMonth())
    },
    async getinfo () {
      let userid = wx.getStorageSync('userInfo').user_id;
      let day = moment(`${this.year}-${this.month}`, 'YYYY-MM').daysInMonth();
      let starttime = moment(`${this.year}-${this.month}-01 00:00:00`, 'YYYY-MM-DD hh:mm:ss').unix();
      let endtime = moment(`${this.year}-${this.month}-${day} 23:59:59`, 'YYYY-MM-DD hh:mm:ss').unix();
      const res = await api.getworkermonthplan({ user_id: userid, start_time: starttime, end_time: endtime });
      console.log(res)
    }
  },
  created () {
    let that = this
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
    wx.getSystemInfo({
      success (res) {
        that.windowHeight = res.windowHeight
      }
    })
  },
  onReady () {
  }
}
</script>

<style scoped>
.container {
  background: #fff !important;
}
.redback {
  width: 100%;
  height: 240rpx;
  background: #ff4444;
}
.picker {
  position: absolute;
  top: 24rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 400rpx;
  height: 64rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rpx 6rpx 20rpx rgba(255, 68, 68, 0.2);
  opacity: 1;
  border-radius: 32rpx;
  color: rgba(51, 51, 51, 1);
  line-height: 64rpx;
  font-size: 28rpx;
  text-align: center;
}
.picker::after {
  content: '';
  position: absolute;
  top: 25rpx;
  right: 104rpx;
  width: 26rpx;
  height: 16rpx;
  background: url(http://mytimg.178mr.com/black_arrow3.png) no-repeat;
  background-size: 100%;
}
.tab {
  position: absolute;
  top: 200rpx;
  left: 0;
  width: 100%;
  padding: 0 32rpx;
}
.tab .tab_details {
  width: 318rpx;
  height: 366rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rpx 6rpx 16rpx rgba(255, 68, 68, 0.1);
  opacity: 1;
  border-radius: 24rpx;
  margin-right: 48rpx;
}
.tab .tab_details:last-child {
  margin-right: 0;
}
.plan_icon {
  display: block;
  width: 100rpx;
  height: 84rpx;
  background: url(http://mytimg.178mr.com/plan_iocn.png) no-repeat;
  background-size: 100%;
  margin: 0 auto;
  margin-top: 46rpx;
}
.tab .tab_details .words {
  width: 100%;
  text-align: center;
  margin-top: 28rpx;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 42rpx;
  color: rgba(51, 51, 51, 1);
  text-shadow: 0px 3rpx 6rpx rgba(255, 177, 153, 0.3);
  opacity: 1;
}
.tab .tab_details .describe {
  padding: 0 28rpx;
  margin-top: 30rpx;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 32rpx;
  color: rgba(153, 153, 153, 1);
  opacity: 1;
}
.monthlist {
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  display: inline-block;
}
.monthlist.cur {
  color: #ff4444;
}
</style>
